<script setup>
import {reactive} from "vue";
import xx from "@/axios/xx";
import {Download, Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const info = reactive({
  list:[],//列表数据
  form:{},//表单数据
  dialogVisible:false, //对话框数据
  total:null,//总条数
  pageNum:null,//当前页
  pageSize:null,//当前页数据容量
  isAdd:true,//增加和修改选项标识
  loanProductTypeList:[],//产品类型对象
  bankInfoList:[],//银行对象
  pass:"通过",//通过
  out:"不通过",//不通过
})
//查询列表信息
const load = () => {
  xx.get("/loanApplication/listToAmd",{
        params: {
          pageNum:info.pageNum,
          pageSize:info.pageSize,
          status:info.form.status,
        }
      },
  ).then(res =>{
    console.log(res);
    info.list = res.data.list;
    //当前页
    info.pageNum = res.data.pageNum;
    //每页大小
    info.pageSize = res.data.pageSize;
    //总条数
    info.total = res.data.total;

    // 对列表按照状态进行排序，将"待审核"的状态放在前面
    info.list.sort((a, b) => {
      if (a.status === '待审核' && b.status !== '待审核') {
        return -1;
      } else if (a.status !== '待审核' && b.status === '待审核') {
        return 1;
      } else {
        return 0;
      }
    });

  })
}//查询产品类型信息
load()
//分页当前页改变
const handleCurrentChange = (pageNum) => {
  //pageNum是前端网页所选择的当前页
  //传递数据给info.pageSize
  info.pageNum = pageNum;
  // 执行加载函数，加载函数会把info.pageNum数据发送给后端，
  // 后端在根据接收到的当前页和每页数据大小返回数据给前端，
  // 前端再用info.pageNum和info.pageSize接收数据
  load();
}//分页当前页改变
//分页每页数据大小改变
const handleSizeChange = (pageSize) => {
  //pageSize是前端所选择的每页大小
  //传递数据给info.pageSize
  info.pageSize = pageSize;
  // 执行加载函数，加载函数会把info.pageSize数据发送给后端，
  // 后端在根据接收到的当前页和每页数据大小返回数据给前端，
  // 前端再用info.pageNum和info.pageSize接收数据
  load();
}//分页每页数据大小改变

// 申请贷款审核对话框的函数
const applyForLoan = (loanApplicationId) => {
  xx.get("/loanApplication/queryOne/"+loanApplicationId).then(res => {
    console.log(res);
    info.form = res.data;
  })
  info.dialogVisible = true; // 打开申请贷款对话框
  loan();
};
//编辑数据
const applyLoan = () => {
  xx.post("/loanApplication/admAudit",info.form).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: res.message,
        type: 'success',
      })
      info.form = {};
      info.dialogVisible = false;
      load();
    } else {
      ElMessage.error(res.message)
      info.form = {};
      info.dialogVisible = false;
      load();
    }
  })
  info.form = {};
  load();
};

//导出数据
const exportExcel = () => {
  xx({
    method:"get",
    url:"/loanApplication/exportExcel",
    params:{
      pageNum:info.pageNum,
      pageSize:info.pageSize,
      status:info.form.status,
    },
    responseType:"blob" //定义为bolb
  }).then(res =>{
    let blob = new Blob([res])
    let downloadElement = document.createElement('a')
    let href = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadElement.href = href
    downloadElement.download = '申请表信息数据.xlsx' // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(href) // 释放掉blob对象
  })
}

</script>

<template>
  <br>
  <!--  产品搜索表单-->
  <el-form :inline="true" :model="info.form" class="demo-form-inline" style="display: flex">
    <el-form-item label="状态: ">
      <el-input v-model="info.form.status" placeholder="模糊查询" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="load" :icon="Search">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="exportExcel"><el-icon class="el-icon--left" ><Download /></el-icon>导出数据</el-button>
    </el-form-item>
  </el-form>


  <!--  产品表格信息-->
  <el-table :data="info.list" border stripe style="width: 100%">
    <el-table-column type="index" align="center" label="序号" width="80" />
    <el-table-column prop="loanType.loanTypeName" align="center" label="产品类型名称" width="180" />
    <el-table-column prop="loanType.bank.bankName" align="center" label="银行名称" width="180" />
    <el-table-column prop="userInfo.username" align="center" label="用户账号" width="180" />
    <el-table-column prop="userInfo.idCard" align="center" label="身份证" width="180" />
    <el-table-column prop="userInfo.creditCard" align="center" label="信用卡号" width="190" />
    <el-table-column prop="userInfo.creditRank" align="center" label="信用级别" width="100" />
    <el-table-column prop="startDate" align="center" label="开始日期" width="120" />
    <el-table-column prop="deadline" align="center" label="截止日期" width="120" />
    <el-table-column prop="status" align="center" label="状态" width="80" />
    <el-table-column label="操作" align="center" width="200" >
      <template #default="scope" >
        <el-button size="default" v-if="scope.row.status==='待审核'" type="primary" @click="applyForLoan(scope.row.loanApplicationId)">审核</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br>
  <!--  分页条-->
  <div class="pagination-wrapper">
    <el-pagination
        id="pagination"
        v-model:current-page="info.pageNum"
        v-model:page-size="info.pageSize"
        :page-sizes="[5,10,15,20,50,70]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="info.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <!-- 贷款申请审核对话框 -->
    <el-dialog
        v-model="info.dialogVisible"
        title="申请贷款审核"
        width="50%"
    >
      <el-form :model="info.list" label-width="100px">
        <el-form-item label="申请编号">
          <el-input v-model="info.form.loanApplicationId" disabled />
        </el-form-item>
        <el-form-item label="产品编号">
          <el-input v-model="info.form.loanTypeId" disabled />
        </el-form-item>
        <el-form-item label="用户编号">
          <el-input v-model="info.form.userId" disabled />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-input v-model="info.form.startDate" disabled />
        </el-form-item>
        <el-form-item label="截止时间">
          <el-input v-model="info.form.deadline" disabled />
        </el-form-item>
        <el-form-item label="审核状态">
          <el-radio-group v-model="info.form.adminCheck">
            <el-radio value="通过">通过</el-radio>
            <el-radio value="不通过">不通过</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="applyLoan">执行</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<style scoped>

</style>